<template>

	<view>
		<!-- 该组件免费，但版权问题需关注“前端组件开发”公众号获取授权。 -->
		<view :style="{'display': 'flex', 'margin-top': `${beishu*20}px`,  'justify-content': 'end'}">

			<view :style="{'margin-left': '0px',
					'background-color': 'white',
					'border-radius': `${beishu*4}px`,
					'border-width': `${beishu*1}px`,
					'border-color': '#999999',
					'padding': `${beishu*4}px ${beishu*6}px`,
					'color': '#333333',
					'font-size': `${beishu*15}px`}" v-if="curPageNum > 1" @click="pageChangeClick(0)"> 上一页</view>
			<view v-if="totalNum !== '0'"
				:style="{'font-size': `${beishu*13}px`, 'margin-left': '0px', 'width': `${beishu*180}px`, 'margin-top': `${beishu*6}px`, 'text-align': 'center'}">
				{{'第 ' + (curPageNum) + ' / ' + (Math.ceil(totalNum/pageCount)) + ' 页' + '&nbsp;&nbsp;  共 ' + totalNum + ' 条数据' }}
			</view>

			<view :style="{'margin-left': '0px',
					'background-color': 'white',
					'border-radius': `${beishu*4}px`,
					'border-width': `${beishu*1}px`,
					'border-color': '#999999',
					'padding': `${beishu*4}px ${beishu*6}px`,
					'color': '#333333',
					'font-size': `${beishu*15}px`}" v-if="curPageNum < (Math.ceil(totalNum/pageCount))" @click="pageChangeClick(1)">
				下一页</view>

		</view>

		<view :style="{'height': `${beishu*80}px`}"></view>
	</view>

</template>

<script>
	export default {
		props: {

			//  分页单页数据数量
			pageCount: {
				type: [Number, String],
				default: 10
			},
			// 数据总数
			totalNum: {

				type: [Number, String],
				default: 0
			},
			// 当前页码
			curPageNum: {

				type: [Number, String],
				default: 1
			},
			// 数据总数
			beishu: {
				type: [Number, String],
				default: 1
			},

		},
		data() {
			return {

			}
		},
		methods: {

			pageChangeClick(tag) {

				this.$emit('pageClick', tag)

			},

		}
	}
</script>

<style scoped>
</style>